<template>
  <div class="classRun">
    <!--      <tips optionTemplate="patrolIndex"></tips>-->
    <div class="search-list mb-10">
      <el-date-picker type="date"
                      placeholder="选择日期"
                      v-model="searchForm.time"
                      :picker-options="pickerOptions1"
                      format="yyyy-MM-dd"
                      size="small"
                      class="mr-10"
                      value-format="yyyy-MM-dd"></el-date-picker>
      <div>
        <component
          v-bind:is="item.propertyType"
          :property.sync="item"
          v-for="(item,index) in getPowerTime"
          :key="index"
          @updateVal="updateValList"
        ></component>
      </div>
      <el-button type="primary" size="small" @click="searchFn('search')" class="ml-10"><i class="el-icon-search"></i>搜索
      </el-button>
      <el-button size="small" @click="searchFn('refresh')"><i class="el-icon-refresh"></i>重置刷新</el-button>
      <downexcel type="trainingClassDay" :option="{class_id: searchForm.class_id, day:searchForm.time}"
                 :excelName="excelNameFn()" :disabled="searchForm.class_id&&searchForm.time?false:true"></downexcel>
    </div>
    <el-tabs v-model="searchForm.department_id" type="card">
      <el-tab-pane :label="item.name" :name="item.id" v-for="item in tabList" :key="item.id"></el-tab-pane>
    </el-tabs>
    <!--本体列表，数据 -->
    <el-table
      ref="multipleTable"
      :data="arryList"
      :stripe="tableStripe"
      :border="tableBorder"
      tooltip-effect="dark"
      header-cell-class-name="table-text-c"
      cell-class-name="table-text-c"
      size="small"
      empty-text="暂无巡班记录"
      :span-method="arraySpanMethod">
      <el-table-column
        align="center"
        prop="score"
        label="班级（总星数/平均数）"
        sortable
        width="200">
        <template slot-scope="scope">
            <span :class="scope.row.list.length?'':'colorRed'">{{
                scope.row.class_name
              }}（{{ scope.row.score ? scope.row.score : 0 }}/{{ scope.row.average ? scope.row.average : 0 }}）</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="name"
        label="巡班详情">
        <el-table-column label="巡班老师" align="center" width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.list.length">
              <div class="lead-list-in" v-for="(item,index) in scope.row.list" :key="index">
                <div class="lead-list-list">{{ item.realname }}</div>
                <div class="lead-list-list">{{ item.time }}</div>
                <div class="lead-list-list">{{ userList[item.user_type] ? userList[item.user_type].name : '' }}</div>
                <div class="lead-list-list">{{ item.remark ? item.remark : '无' }}</div>
                <div class="lead-list-list" ref="height">
                  <el-popover
                    placement="left-start"
                    title="评分明细"
                    width="450"
                    trigger="hover">
                    <div class="tableline">
                      <div class="Patrol-list" v-for="(item_, index) in item.list" :key="index">
                        <span>【{{ item_.parent_name }}】{{ item_.name }}</span>
                        <span>{{ item_.score }}星</span>
                      </div>
                    </div>
                    <span slot="reference" class="tablelineBtn"><el-tag>{{ item.score }}</el-tag></span>
                  </el-popover>
                </div>
                <div class="lead-list-list">
                  <el-button plain type="danger" size="mini" @click="delBtn(item)">删除</el-button>
                </div>
              </div>
            </div>
            <div class="lead-list-in" v-else></div>
          </template>
        </el-table-column>
        <el-table-column label="巡班时间" align="center" width="140"></el-table-column>
        <el-table-column label="巡班对象" align="center" width="140"></el-table-column>
        <el-table-column label="巡班意见" align="center"></el-table-column>
        <el-table-column label="星数" align="center" width="80"></el-table-column>
        <el-table-column label="操作" align="center" width="100"></el-table-column>
      </el-table-column>
      <!--        <el-table-column-->
      <!--            align="center"-->
      <!--            label="操作"-->
      <!--            width="140">-->
      <!--          <template slot-scope="scope">-->
      <!--            <el-button plain size="mini" @click="showDetailFn(scope.row.class_id,scope.row.class_name)">查看巡班老师-->
      <!--            </el-button>-->
      <!--          </template>-->
      <!--        </el-table-column>-->
    </el-table>
    <div class="height40"></div>
    <trainingTeacherList :visible.sync="classVisible" :classId="classId" :className="className"></trainingTeacherList>
  </div>
</template>

<script>
import {pagination} from '@/utils/util.js'
import {patrol_signDelete} from '@/api/admin/ClassDynamics'

export default {
  components: {},
  watch: {
    'searchForm.department_id'() {
      console.log('变了部门')
      this.InitFn()
    }
  },
  data() {
    return {
      tableStripe: true, // 是否斑马栏
      tableBorder: true, // 单元格右边边框
      arryList: [], // 数据列表
      classVisible: false,
      classId: 0,
      Weekdate: '--',
      Weektime: '--',
      weekName: '--',
      week: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      searchForm: {
        time: '',
        class_id: '',
        section_id: '',
        department_id: '1',
      },
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now() //  - 8.64e7
        }
      },
      training: 'training',
      searchBox: {
        start_time: '',
        end_time: '',
        class_id: '',
        section_id: ''
      },
      tabList: [
        {
          name: '行政',
          id: '1'
        },
        {
          name: '后勤',
          id: '2',
        },
        {
          name: '业务',
          id: '3',
        }
      ],
      className: '',
      getPowerTime: {
        'section_id': {
          name: 'section_id', // key名称
          default: '', // 默认值
          propertyType: "Select", // 组件名称
          placeholder: '年段', // 默认值
          valueText: '', // 值
          leve: 2,
          api: this.api.user_sectionindex, // 下拉框的请求接口
          keyName: 'section_name',// 调用的字段
          child: [
            {
              name: 'class_id',
              default: '',
              propertyType: "",
              placeholder: '班级',
              valueText: '',
              api: this.api.user_classesindex,
              keyName: 'class_name',
            }
          ]
        }
      },
      userList: {
        1: {
          name: '幼儿',
          id: 1
        },
        2: {
          name: '教师',
          id: 2
        },
        4: {
          name: '生活老师',
          id: 4
        },
        3: {
          name: '场地',
          id: 3
        }
      },
    }
  },
  created() {
    this.InitFn()
    this.updateTime()
    // this.timerID = setInterval(() => {
    //   this.updateTime()
    // }, 1000)
  },
  methods: {
    arraySpanMethod({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 1) {
        return [1, 6];
      } else if (columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5 || columnIndex === 6) {
        return [0, 0];
      }
    },
    // 初始化
    InitFn() {
      let data_ = JSON.parse(JSON.stringify(this.searchForm))
      this.$fetch(this.api.classActive.trainHistory.index, data_).then((response) => {
        if (response.code === 0) {
          let status = 0;
          let list_ = []
          for (let item of response.list) {
            if (!item.score) {
              item.score = 0
            } else {
              status = 1
              item.average = parseInt(item.score / item.list.length)
            }
            if (item.list.length) {
              // 巡班人数
              for (let userPoint of item.list) {
                let score = 0;
                for (let scoreList of userPoint.list) {
                  score = score + Number(scoreList.score)
                }
                userPoint.score = score // 单个分值
              }
              list_.push(item)
            }
          }
          this.arryList = JSON.parse(JSON.stringify(list_))
          // 有评分值进行排序
          if (status) {
            this.sortFn('score')
          }
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 搜索组件
    searchFn(option) {
      console.log(option, this.Weekdate)
      if (option === 'refresh') {
        this.searchForm.time = this.Weekdate;
        let newGetPower = this.getJson(this.getPowerTime)
        newGetPower['section_id'].valueText = '';
        newGetPower['section_id'].child[0].valueText = '';
        this.getPowerTime = newGetPower;
        this.searchForm.class_id = '';
        this.searchForm.section_id = '';
        this.searchForm.department_id = '1';
      } else {
        if (!this.searchForm.time) {
          this.searchForm.time = this.Weekdate;
        }
      }
      this.InitFn()
    },
    compare(attr) {
      return function (a, b) {
        var val1 = a[attr];
        var val2 = b[attr];
        return val2 - val1;
      }
    },
    sortFn(type) {
      this.arryList.sort(this.compare(type));
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    handleSelectionChange(val) {
      this.handleSelection = val
    },
    showDetailFn(id, name) {
      this.classId = id
      this.className = name
      this.classVisible = true
    },
    updateTime() {
      let cd = new Date()
      this.Weektime = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2)
      this.Weekdate = this.zeroPadding(cd.getFullYear(), 4) + '-' + this.zeroPadding(cd.getMonth() + 1, 2) + '-' + this.zeroPadding(cd.getDate(), 2)
      this.weekName = this.week[cd.getDay()]
      this.searchForm.time = this.Weekdate;
    },
    zeroPadding(num, digit) {
      let zero = ''
      for (let i = 0; i < digit; i++) {
        zero += '0'
      }
      return (zero + num).slice(-digit)
    },
    // 更新值
    updateVal(option) {
      // console.log('变更数据收到的数据内容：', option)
      if (option.input) {
        this.searchBox[option['input'].name] = option['input'].valueText
      } else if (option.select) {
        for (let i in option.select) {
          if (option.select[i].name) {
            this.searchBox[option.select[i].name] = option.select[i].valueText
          } else {
            this.searchBox[option.select[i - 1].name] = option.select[i].valueText ? option.select[i].valueText : option.select[i - 1].valueText
          }
        }
      }
    },
    updateValList(option) {
      if (option.input) {
        this.searchForm[option['input'].name] = option['input'].valueText
      } else if (option.select) {
        for (let i in option.select) {
          if (option.select[i].name) {
            this.searchForm[option.select[i].name] = option.select[i].valueText
          } else {
            this.searchForm[option.select[i - 1].name] = option.select[i].valueText ? option.select[i].valueText : option.select[i - 1].valueText
          }
        }
      }
      if (option.nameOption) {
        this.className = option.nameOption
      }
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    clearDown() {
      let newGetPower = this.getJson(this.getPower)
      newGetPower['section_id'].valueText = '';
      newGetPower['section_id'].child[0].valueText = '';
      this.getPower = newGetPower
    },
    excelNameFn() {
      return `${this.className}${this.searchForm.time}`
    },
    delBtn(row) {
      let _this = this
      this.$confirm('是否确认删除此数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return patrol_signDelete({id: row.sign_id})
      }).then(data => {
        _this.$message({
          showClose: true,
          message: '删除成功',
          type: 'success'
        })
        _this.InitFn()
      }).catch(function (err) {
      })
    }
  },
  mounted() {
  },
}
</script>
<style>
.classRun .el-table td {
  padding: 0;
}

.classRun .el-table .cell {
  padding: 0;
}

.lead-list-in {
  display: flex;
  align-items: center;
  min-height: 40px;
  border-bottom: 1px solid #d6d6d6;
  width: 100%;
}

.lead-list-in:hover {
  background: rgba(77, 176, 229, .6);
  cursor: pointer;
}

.lead-list-in:last-child {
  border-bottom: none;
}

.lead-list-in .lead-list-list {
  /*display: block;*/

  border-right: 1px solid #d6d6d6;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lead-list-in .lead-list-list:nth-child(1) {
  width: 100px;
}

.lead-list-in .lead-list-list:nth-child(2) {
  width: 140px;
}

.lead-list-in .lead-list-list:nth-child(3) {
  width: 140px;
}

.lead-list-in .lead-list-list:nth-child(4) {
  flex: 1;
  padding: 5px;
}

.lead-list-in .lead-list-list:nth-child(5) {
  width: 80px;
}

.lead-list-in .lead-list-list:nth-child(6) {
  width: 100px;
}

.lead-list-in .lead-list-list:last-child {
  border-right: none;
}

.search-list {
  display: flex;
  align-items: center;
}

.search-list-right {
  flex: 1;
  text-align: right;
}

.Patrol-list {
  display: flex;
  padding: 7px 0;
  cursor: pointer;
}

.Patrol-list:hover {
  text-decoration: underline;
  color: #1b8de5;
}

.Patrol-list span {
  display: block;
}

.Patrol-list span:first-child {
  flex: 1;
  padding-right: 15px;
  /*text-align: right;*/
}

.Patrol-list span:last-child {
  width: 40px;
  color: red;
}
</style>

